<template>
  <button
  class="sg-button"
  v-bind="$attrs"
  v-on="$listeners"
  :type="nativeType"
  :disabled="disabled"
  :class="[
    type ? 'sg-button-' + type : '',
    size ? 'sg-button-' + size : '',
    position,
    {
      'is-round': round,
      'is-circle': circle,
      'is-disabled': disabled
    }]">
    <i class="iconfont " :class="[icon]" v-if="icon == 'icon-jiazai'"></i>
    <i class="iconfont " :class="[icon]" v-if="icon && icon != 'icon-jiazai'"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>
<script>
export default {
  name: 'SgButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    nativeType: {
      type: String,
      default: 'button'
    },
    icon: {
      type: String,
      default: ''
    },
    position: {
      type: String,
      default: ''
    },
    size: String,
    round: Boolean,
    circle: Boolean,
    disabled: Boolean
  },

  methods: {
    // handleClick () {
    //   this.$emit('handleClick', 'sadfsdfsdfsd')
    // }
  }
}
</script>

<style lang="scss" scoped>

  $primary_color:#409eff;
  $success_color:#67c23a;
  $info_color:#909399;
  $warning_color:#e6a23c;
  $danger_color:#f56c6c;

  .sg-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;

    &:hover, &:focus{
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
    &:active{
      color: #3a8ee6;
      border-color: #3a8ee6;
      outline: none;
    }
  }
  .sg-button.sg-button-primary{
    color: #fff;
    border: 1px solid $primary_color;
    background: $primary_color;

    &:hover, &:focus{
      background: #66b1ff;
      border-color: #66b1ff;
      color: #fff;
    }
    &:active{
      background: #3a8ee6;
      border-color: #3a8ee6;
      color: #fff;
    }
  }
  .sg-button.sg-button-success{
    color: #fff;
    border: 1px solid $success_color;
    background: $success_color;

    &:hover, &:focus{
      background: #85ce61;
      border-color: #85ce61;
      color: #fff;
    }

    &:active{
      background: #5daf34;
      border-color: #5daf34;
      color: #fff;
    }
  }
  .sg-button.sg-button-info{
    color: #fff;
    border: 1px solid $info_color;
    background: $info_color;

    &:hover, &:focus{
      background: #a6a9ad;
      border-color: #a6a9ad;
      color: #fff;
    }

    &:active{
      background: #82848a;
      border-color: #82848a;
      color: #fff;
    }
  }
  .sg-button.sg-button-warning{
    color: #fff;
    border: 1px solid $warning_color;
    background: $warning_color;

    &:hover, &:focus{
      background: #ebb563;
      border-color: #ebb563;
      color: #fff;
    }

    &:active{
      background: #cf9236;
      border-color: #cf9236;
      color: #fff;
    }
  }
  .sg-button.sg-button-danger{
    color: #fff;
    border: 1px solid $danger_color;
    background: $danger_color;

    &:hover, &:focus{
      background: #f78989;
      border-color: #f78989;
      color: #fff;
    }

    &:active{
      background: #dd6161;
      border-color: #dd6161;
      color: #fff;
    }
  }
  .sg-button.sg-button-medium{
    padding:10px 20px;
    font-size:14px;
    border-radius: 4px;
  }
  .sg-button.sg-button-small{
    padding:8px 16px;
    font-size:12px;
    border-radius: 3px;
  }
  .sg-button.sg-button-mini{
    padding:6px 14px;
    font-size:12px;
    border-radius: 3px;
  }

  .sg-button.is-round{
    border-radius:20px;
    padding: 12px 23px;
  }
  .sg-button.is-circle{
    border-radius: 50%;
    padding: 12px;
  }

 .sg-button.is-disabled{
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    border-color: #ebeef5;
  }

  .sg-button.sg-button-default.is-disabled,
  .sg-button.sg-button-default.is-disabled:focus,
  .sg-button.sg-button-default.is-disabled:hover {
    color: #c0c4cc;
    background-color: #fff;
  }

  .sg-button.sg-button-primary.is-disabled,
  .sg-button.sg-button-primary.is-disabled:active,
  .sg-button.sg-button-primary.is-disabled:focus,
  .sg-button.sg-button-primary.is-disabled:hover {
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff;
  }
  .sg-button.sg-button-success.is-disabled,
  .sg-button.sg-button-success.is-disabled:active,
  .sg-button.sg-button-success.is-disabled:focus,
  .sg-button.sg-button-success.is-disabled:hover {
    color: #fff;
    background-color: #b3e19d;
    border-color: #b3e19d;
  }
  .sg-button.sg-button-info.is-disabled,
  .sg-button.sg-button-info.is-disabled:active,
  .sg-button.sg-button-info.is-disabled:focus,
  .sg-button.sg-button-info.is-disabled:hover {
    color: #fff;
    background-color: #c8c9cc;
    border-color: #c8c9cc;
  }
  .sg-button.sg-button-warning.is-disabled,
  .sg-button.sg-button-warning.is-disabled:active,
  .sg-button.sg-button-warning.is-disabled:focus,
  .sg-button.sg-button-warning.is-disabled:hover {
    color: #fff;
    background-color: #f3d19e;
    border-color: #f3d19e;
  }
  .sg-button.sg-button-danger.is-disabled,
  .sg-button.sg-button-danger.is-disabled:active,
  .sg-button.sg-button-danger.is-disabled:focus,
  .sg-button.sg-button-danger.is-disabled:hover {
    color: #fff;
    background-color: #fab6b6;
    border-color: #fab6b6;
  }

  .sg-button.left,.sg-button.right{
    display: inline-flex;
  }
  .sg-button.left .iconfont{
    order: 1;
  }
  .sg-button.left span{
    order: 2;
    margin-left:5px;
  }
  .sg-button.right .iconfont{
    order: 2;
  }
  .sg-button.right span{
    order: 1;
    margin-right:5px;
  }

  .icon-jiazai{
    animation:mymove 2s linear infinite;
    -webkit-animation:mymove 2s linear infinite; /* Safari 和 Chrome */
  }

  @keyframes mymove
  {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }

  @-webkit-keyframes mymove /* Safari and Chrome */
  {
    from {transform:rotate(360deg);}
    to {transform:rotate(0deg);}
  }
</style>
